<template>
	<div>
		<div class="main_operation">
		    <div class="operation_left">
               <a-button v-if="userInfo.is_root === 1" class="mr10" type="danger" @click="batchDelBtn">批量删除</a-button>
		    </div>
		    <div class="operation_right">
				<a-select allowClear @change="handleSelect" v-model="formList.handle_status" style="width: 180px" placeholder="请选择处理状态">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="0">未处理</a-select-option>
            <a-select-option :value="1">已处理</a-select-option>
            <a-select-option :value="2">误报</a-select-option>
        </a-select>
				<a-select allowClear class="mr10" style="width: 200px" v-model="formList.equipment_id" @change="equipChange" placeholder="设备名称">
					<a-select-option v-for="item in equipmentData" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
				</a-select>
				<a-select allowClear v-if="formList.equipment_id" class="mr10" style="width: 200px" v-model="formList.register_id" placeholder="设备数据">
					<a-select-option v-for="item in itemDetail" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
				</a-select>
		        <!-- <a-range-picker class="mr10" :placeholder="['开始时间', '结束时间']" /> -->
		        <a-button class="mr10" type="primary" @click="()=>{formList.page = 1;changeData()}">搜索</a-button>
                 <!-- <a-button class="mr10"  type="primary" @click="downloadBtn">简报记录导出</a-button> -->
		        <!-- <a-button type="primary">下载数据</a-button> -->
		    </div>
		</div>
		<div class="main">
			<a-table :pagination="false" :loading="tableLoad" :columns="Fields" :dataSource="dataLists.data"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, columnWidth: 40, onChange: onSelectChange }"
				:rowKey="record => record.id"
				:scroll="{x: 1800, y: 500 }"
			>
				<div slot="handle_status_name" slot-scope="text, record">
					<a-tag :color="record.handle_status === 1 ? '#19be6b' : record.handle_status === 0? '#ed4014' : '#f90' ">{{text}}</a-tag>
				</div>
				<div slot="action" slot-scope="text, record">
					<a-button size="small" type="primary" @click="details(record)">详情</a-button>
				</div>
			</a-table>
			<div class="pageBox">
				<a-pagination
					:total="dataLists.total"
					:showTotal="total => `共 ${total} 条数据`"
					:pageSize="dataLists.per_page"
					:defaultCurrent="1"
					@change="pageChange"
				/>
			</div>
		</div>
	</div>
</template>

<script>
   import { mapState, mapActions } from 'vuex';
   import Vue from 'vue';
   import { USER } from '@/store/mutation-types';

export default {
  name: 'Record',
  data() {
		    return {
      /* 通用模块 */
      // 列表
      tableLoad: false, // 列表loading状态
      formList: { // 列表信息
        handle_status: '',
        page: 1,
      },
      selectedRowKeys: [], // 勾选的id
      /* 通用模块end */
		    };
  },
  watch: {
    // equipmentData() {
    // 	this.formList.equipment_id = this.equipmentData[0].id
    // 	// this.registerDetail(this.equipmentData[0].id)
    // 	this.equipChange(this.equipmentData[0].id)
    // },
    // itemDetail() {
    // 	console.log(this.itemDetail);
    // 	if (this.itemDetail.length > 0) {
    // 	this.formList.register_id = this.itemDetail[0].id
    // 	} else {
    // 	this.formList.register_id = undefined
    // 	}
    // },
  },
  computed: {
    ...mapState({
      Fields: state => state.alertRecord.Fields,
      dataLists: state => state.alertRecord.dataLists,
      requestCode: state => state.alertRecord.requestCode,
      equipmentData: state => state.equipment.equipmentData,
        		itemDetail: state => state.equiRegister.itemDetail,
    }),
    userInfo() {
      return Vue.ls.get(USER);
    },
  },
  mounted() {
    this.equipmentAll();
    this.changeData();
    console.log(this.$route);
  },
  methods: {
    /* 通用模块 */
    ...mapActions({
      getLists: 'alertRecord/getLists', // 列表
      dataDel: 'alertRecord/dataDel', // 删除
      equipmentAll: 'equipment/equipmentAll', // 所有设备名称
      registerDetail: 'equiRegister/registerDetail', // 所有设备寄存器信息
      AlarmRecord: 'equiRegister/alarmRecord', // 报警记录导出

    }),
    // 勾选
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    // 批量删除
    downloadBtn() {
      this.AlarmRecord(this.formList).then((res) => {
        console.log(res);
        const execlName = '报警记录导出';
        if (res.data.type == 'application/json') {
          this.$message.error('查询数据为空');
        } else {
          const blob = new Blob(
            [res.data], {
              type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
            },
          );
          const aEle = document.createElement('a'); // 创建a标签
          const href = window.URL.createObjectURL(blob); // 创建下载的链接
          aEle.href = href;
          aEle.download = execlName; // 下载后文件名
          document.body.appendChild(aEle);
          aEle.click(); // 点击下载
          document.body.removeChild(aEle); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象

          this.$message.success('导出成功');
        }
      });
    },
    // 重新获取列表数据
    changeData() {
      this.tableLoad = true;
      setTimeout(() => {
        this.getLists(this.formList);
        this.tableLoad = false;
      }, 1000);
    },
    // 页码
    pageChange(page) {
      this.formList.page = page;
      this.getLists(this.formList);
    },
    // 批量删除
    batchDelBtn() {
      if (this.selectedRowKeys.length <= 0) {
        this.$warning({
          title: '提示',
          content: '请先勾选需要删除的设备',
        });
        return false;
      }
      const _this = this;
      const idArr = this.selectedRowKeys;
      console.log(idArr);
      this.$confirm({
        title: '您确定要删除勾选的设备吗?',
        content: '删除后将不可恢复,请仔细核对!',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          _this.dataDel(idArr);
          _this.changeData();
        },
      });
    },
    /* 通用模块end */
    // 详情
    details(item) {
      const that = this;
      this.$router.push({
        path: `/alert/detail/${item.id}`,
        // query: {
        // 	currentPage: that.formList.page
        // }
      });
    },
    // 设备名称变化
    equipChange(val) {
      // delete this.formList.register_id
      this.registerDetail(val);
    },
    handleSelect(value) {
      console.log(value);
    },
  },
};
</script>

<style scoped>

</style>
